<template>
	<view class="wrap">
	    <video rel="noopener noreferrer" :poster="video.image" class="video-box" controls :src="video.video"></video>
	    <button class="parsing" @click="download('video')" style="margin-top: 20rpx;">保存到相册</button>
		<button class="parsing"  @click="download('image')">保存封面(小程序弃用)</button>
		<button class="parsing"  @click="download('music')">保存背景乐(小程序弃用)</button>
		<button class="parsing"  @click="copy('video')">复制视频链接</button>
		<button class="parsing"  @click="copy('image')">复制封面链接</button>
		<button class="parsing"  @click="copy('music')">复制背景乐链接</button>
	    <button class="parsing"  open-type="share">分享</button>
		<button class="parsing go-back" style="margin-bottom: 20rpx;" @click="go_back">返回</button>
	</view>
</template>

<script>
	import Api_url from '@/common/config'
	import {copyToClipboard} from '../../../common/utils.js'
	import {getVideoUrl} from'../../../common/api/tool.js'
	export default {
		data() {
			return {
				show_view: true,
				providerList: [],
				video: null
			}
		},
		onShareAppMessage(res) {
			return {
				title: "去水印小工具",
				path: '/pages/video/index?query=' + encodeURIComponent(this.video)
			}
		},
		onNavigationBarButtonTap(e) {
			if (e.index === 0) {
				// #ifdef APP-PLUS
				if (this.providerList.length === 0) {
					uni.showModal({
						title: '当前环境无分享渠道!',
						showCancel: false
					})
					return;
				}
				let itemList = this.providerList.map(function(value) {
					return value.name
				})
				uni.showActionSheet({
					itemList: itemList,
					success: (res) => {
						uni.share({
							provider: this.providerList[res.tapIndex].id,
							scene: this.providerList[res.tapIndex].type && this.providerList[res.tapIndex].type === 'WXSenceTimeline' ?
								'WXSenceTimeline' : 'WXSceneSession',
							type: 4,
							title: this.video_title,
							summary: this.video_title,
							mediaUrl: this.video_url,
							href: '/pages/video/index?query=' + encodeURIComponent(JSON.stringify(this.video)),
							success: (res) => {
								console.log('success:' + JSON.stringify(res));
							},
							fail: (e) => {
								uni.showModal({
									content: '分享失败1:' + e.errMsg,
									showCancel: false
								})
							}
						});
					}
				});
				// #endif
			}
		},
		onLoad(event) {
			// 目前在某些平台参数会被主动 decode，暂时这样处理。
			try{
				this.videoDesc = decodeURIComponent(event.query)
			}catch(e){
				this.videoDesc = event.query
			}
			this.$api('tools','getVideoInfo',{url:this.videoDesc}).then(res=>{
				console.log(res)
				this.video=res
				uni.setNavigationBarTitle({
					title: this.video.desc
				});
			})
		},
		methods: {
			go_back() {
				uni.switchTab({url:'../index'})
			},
			download(type) {
				
				//#ifdef H5
				var a = document.createElement('a');
				//需要下载的数据内容,我这里放的就是BLOB，如果你有下载链接就不需要了
				a.href = this.video[type];
				a.download = this.video.desc;
				a.rel="noopener noreferrer"
				a.target = '_blank';
				a.click();
				//#endif
				//#ifdef MP
				const downloadTask = uni.downloadFile({
					url: Api_url+"common/uploadVideo?fileName="+this.video[type],
					success: (e) => {
						if(type=='image'){
							uni.saveImageToPhotosAlbum({
								filePath:e.tempFilePath,
								success: function () {
									uni.showToast({
										icon: 'none',
										title: '已保存到手机相册'
									})
								}
							});
						}else if(type=='video'){
							uni.saveVideoToPhotosAlbum({
								filePath: e.tempFilePath,
								success: () => {
									uni.showToast({
										icon: 'none',
										title: '已保存到手机相册'
									})
								},
								fail: (errMsg) => {
									uni.showToast({
										icon: 'none',
										title: '保存到手机相册失败' + JSON.stringify(errMsg)
									})
								}
							});
						}
					},
					fail: (err) => {
						uni.showModal({
							content: '下载失败，' + JSON.stringify(err),
							showCancel: false
						})
					}
				});
				downloadTask.onProgressUpdate((res) => {
					uni.showLoading({
						title: '下载进度' + res.progress + '%'
					});
					
				})
				//#endif
			},
			copy(type) {
				//#ifdef H5
				copyToClipboard(this.video[type])
				uni.showToast({
					icon:'none',
					title:'已复制到剪切板！'
				})
				//#endif
				//#ifdef MP
				uni.setClipboardData({
				    data: this.video[type],
				    success: function () {
				        uni.showToast({
				        	icon: 'none',
				        	title: '复制成功',
				        })
				    }
				});
				//#endif
			}
			
		}
	}
</script>

<style>
	.video-box {
	    display: block;
	    width: 100%;
	    height: 800rpx;
	    margin: 20rpx auto;
	}
	
	.parsing {
	    overflow: hidden;
	    display: block;
	    width: 664rpx;
	    height: 88rpx;
	    line-height: 88rpx;
	    color: #fff;
	    background-color: #337AFF;
	    box-shadow: 0 14rpx 28rpx rgba(51,122,255,.3);
		margin: 10px auto;
	}
	
	.go-back {
	    color: #000;
	    background-color: #F8F8F8;
	    border: 1px solid rgba(5,5,5,.1);
	    box-shadow: none;
	    margin-top: 40rpx;
	}
	
	.show_view {
		display: none !important;;
	}
</style>